<script>
/**
 * 招商业绩编辑
 * @Author Mumu xinglinhe@qq.com
 * @Date 2022/09/13
 */

import { ref } from 'vue';

export default{
    components:{

    },
    props:{

    },
    data(){
        return {
			visible:false,
            loading:false,
            data:{},
            value1 : [],
            expandedKeys:[],
            selectedKeys:[],
            checkedKeys:[],
            fieldNames : {
                children: 'child',
                title: 'name',
            },
            treeData : [],
            bodystyle : {
                height: '480px',
                overflow: 'hidden',
                overflowY: 'scroll',
            },
        }
    },
    watch: {
        expandedKeys(newVal, oldVal) {
        // 监听 num 属性的数据变化
        // 作用 : 只要 num 的值发生变化,这个方法就会被调用
        // 第一个参数 : 新值
        // 第二个参数 : 旧值,之前的值
            console.log('oldVal:',oldVal)
            console.log('newVal:',newVal)
        }
    },
    created(){},
    mounted(){},
    methods:{
        // 同级只展开一个节点
        async expandChange(expandedKeys, { expanded, node }){
            const tempKeys = (node.parent ? node.parent.children :                     
            this.treedata).map(({ id }) => id)
            if (expanded) {
            this.expandedKeys = tempKeys.filter(temp => temp === node.eventKey)
            } else {
            this.expandedKeys = expandedKeys;
            }
        },
        async send(){
            this.loading=true;
            this.data.rule_list = this.checkedKeys;
            let rs = await this.muajax.save_rule({
                ...this.data,
            });
            this.loading=false;
            if(rs.code==200){
                this.$message.success(rs.msg);
                this.visible=false;
                this.$emit("update_list");
            }
        },
        async datainit(){
            let rs = await this.muajax.fodauthor({ id : this.param.id});
            if(rs.code==200){
                this.treeData=rs.list;
                this.checkedKeys=rs.checkedKeys;
            }
        },//初始化本页数据
        show(show,param){
            this.visible=show;
            if(param) {
                if(show){
                    this.param=param;
                    if(!!this.param?.id)
                        this.data.id = this.param.id;
                        this.datainit();
                }
            } else {
                this.data=[{}];
            }
        },
    },
    computed:{},
    watch:{},
    filters:{},
}
</script>
<template>
    <a-modal
        v-model:visible="visible"
        width="500px"
        title="商户模块授权"
        :maskClosable="false"
        @ok="send"
        cancelText="取消"
        :body-style="bodystyle"
        okText="提交"
        :confirmLoading="loading"
    >
        <a-tree
            v-model:expandedKeys="expandedKeys"
            v-model:selectedKeys="selectedKeys"
            v-model:checkedKeys="checkedKeys"
            checkable
            :tree-data="treeData"

        >
            <template #title="{ title, key }">
            <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
            <template v-else>{{ title }}</template>
            </template>
        </a-tree>
    </a-modal>
</template>
<style lang="less" scoped>

</style>